﻿<!DOCTYPE html>
<html>
	<head>
		<title>Morphic!</title>
		<script type="text/javascript" src="morphic.js"></script>
		<script type="text/javascript">			
			var	world1, world2; 

			window.onload = function () {
				world1 = new WorldMorph(
					document.getElementById('world1'), false);
				world2 = new WorldMorph(
					document.getElementById('world2'), false);
				setInterval(loop, 50);
			};

			function loop() {
				world1.doOneCycle();
				world2.doOneCycle();
			}
		</script>
	</head>
	<body>
		<p>first world:</p>
		<canvas id="world1" tabindex="1" width="600" height="400">
			<p>Your browser doesn't support canvas.</p>
		</canvas>
		<p>second world:</p>
		<canvas id="world2" tabindex="2" width="400" height="600">
			<p>Your browser doesn't support canvas.</p>
		</canvas>
	</body>
</html>